<template>
  <div class="home" style="background:#F2F4F8;height:100%; margin-bottom:10px;">
    <el-container
      v-if="roleType==null || roleType=='null' || roleType==''"
      :style="{height:bannerHeight}"
      class="bannerCol"
    ></el-container>
    <el-container v-if="roleType!=null && roleType!='null' && roleType!=''">
      <el-header style="height:auto;">
        <div class="topSearch">
          <span class="maintoplefttext el-icon-date">{{ createPicker }}</span>
          <div class="topSearchRight">
            <el-form
              ref="form"
              label-width="120px"
              v-if="roleList.NetSalesManager || roleList.ShowroomManager"
            >
              <el-form-item label="顾问：">
                <!--cms 注意 销售顾问改为“顾问” -->
                <el-select v-model="selectvalue" placeholder="请选择" @change="changeSelect">
                  <el-option
                    v-for="item in consults"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-button size="small" style="marginLeft:10px;" @click="init">刷 新</el-button>
          </div>
        </div>
        <div class="topflex">
          <div
            style="flex:1;marginRight:10px;"
            v-if="roleList.NetSalesManager || roleList.ShowroomManager"
          >
            <topright :rowData="formData" :roleList="roleList" />
          </div>
          <div style="flex:1;">
            <top2
              v-if="roleList.NetSalesManager || roleList.NetSalesConsultant"
              :rowData="formData1"
              :roleList="roleList"
            />
            <top2 v-else :rowData="formData1" :roleList="roleList" />
          </div>
          <div class="flexone">
            <top :rowData="formData2" :roleList="roleList" />
          </div>
          <!-- cms注意  去除基盘维系模块
             <div class="flexone" v-if="roleList.SalesConsultant || roleList.ShowroomManager">
            <top :rowData="formData3" :roleList="roleList"/>
          </div>-->
          <!-- <div class="flexone" v-if="roleList.SalesConsultant">
            <top :rowData="formData4" :roleList="roleList"/>
          </div>-->
        </div>
      </el-header>
      <el-main>
        <div class="maintop">
          <!-- <el-form ref="form" label-width="100px" style="display: inline-block;" v-if="roleList.NetSalesManager || roleList.ShowroomManager">
              <el-form-item label="销售顾问：" style="width:200px;">
                <el-select v-model="selectBvalue" placeholder="请选择" @change="changeBSelect">
                  <el-option
                    v-for="item in Bconsults"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
          </el-form>-->
          <el-tabs class="lazyLoadTab" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane class="lazyLoadTabPane" label="跟进统计" name="first"></el-tab-pane>
            <el-tab-pane class="lazyLoadTabPane" label="销售过程" name="second"></el-tab-pane>
            <el-tab-pane
              class="lazyLoadTabPane"
              label="团队绩效"
              name="third"
              v-if="roleList.NetSalesManager || roleList.ShowroomManager"
            ></el-tab-pane>
          </el-tabs>
          <div class="maintopleft">
            <el-radio-group v-model="radio1" @change="changeDate">
              <el-radio-button
                v-for="(item, index) in radioList"
                :key="index"
                :label="item.value"
                plain
              >{{item.text}}</el-radio-button>
            </el-radio-group>

            <el-select
              v-model="selectZvalue"
              placeholder="自定义"
              @change="changeZSelect"
              @clear="clearDate"
              clearable
              style="width:90px;"
            >
              <el-option
                v-for="item in radioList"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-date-picker
              v-show="selectZvalue === 'day'"
              v-model="searchDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              style="width:210px;"
            ></el-date-picker>
            <el-date-picker
              v-if="selectZvalue === 'week'"
              v-model="searchDate"
              type="week"
              format="yyyy 第 WW 周"
              value-format="yyyy-MM-dd"
              :picker-options="{firstDayOfWeek:1}"
              placeholder="请选择"
            ></el-date-picker>
            <el-form ref="form" v-show="selectZvalue === 'quarter'" style="display: inline-block;">
              <Quarter ref="Quarter" :disabled="[]" :getValue="getQuarter" />
            </el-form>
            <el-date-picker
              v-show="selectZvalue === 'month' || selectZvalue === 'year'"
              v-model="searchDate"
              :type="selectZvalue"
              placeholder="请选择"
            ></el-date-picker>
            <span
              v-show="!selectZvalue"
              style="display: inline-block;padding:0 10px;"
            >{{ showPicker }}</span>
          </div>
          <!-- <LazyLoadTab v-model="activeName" :tabMenus="menus"></LazyLoadTab> -->
        </div>
        <div class="tabShow">
          <FollowUpStatistics
            v-if="activeName === 'first'"
            :rowDate="rowDate"
            :roleList="roleList"
          />
          <SalesProcess
            v-else-if="activeName === 'second'"
            :rowDate="rowDate"
            :roleList="roleList"
          />
          <TeamPerformance
            v-else-if="activeName === 'third'"
            :rowDate="rowDate"
            :roleList="roleList"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { queryHomePageTop, qryAuditOrderNum } from '@/api/dashboard/index';
import top from './top';
import top2 from './top2';
import topright from './topright';
import { forMonth } from '@/utils/validate';
import { authority } from '@/utils/authMixin';
import FollowUpStatistics from '@/pages/dashboard/FollowUpStatistics/index';
import SalesProcess from '@/pages/dashboard/SalesProcess/index';
import TeamPerformance from '@/pages/dashboard/TeamPerformance/index';
import Quarter from '@/components/TopFilter/Quarter';
import moment from 'moment';
import omeHome from './oem-home';
export default {
  name: 'Modal',
  mixins: [authority],
  components: {
    top,
    top2,
    topright,
    FollowUpStatistics,
    SalesProcess,
    TeamPerformance,
    Quarter,
    omeHome
  },
  data() {
    return {
      roleType: localStorage.getItem('roleType'),
      roleList: {
        NetSalesConsultant: false, // 网销顾问
        NetSalesManager: false, // 网销经理
        SalesConsultant: false, // 销售顾问(展厅顾问)
        ShowroomManager: false // 展厅经理
      },
      consults: [],
      selectvalue: 0,
      Bconsults: [],
      selectBvalue: 0,
      formData1: {
        title: '跟进任务', //cms  潜客跟进改为跟进任务
        introduction: '未跟进',
        progressBarTitle1: '逾期未跟进',
        progressBarTitle2: '未来',
        sum: 0,
        noNumber: 0,
        progressBar1: 0,
        progressBarAll1: 0,
        progressBar2: 0,
        progressBarAll2: 0,
        routerLinkTo: '/potenCus/customer/customerFollowInfo/index',
        tomorrow: 0,
        firstTouchCount: 0,
        judgeCount: 0,
        consultant: this.selectBvalue
      },
      formData2: {
        title: '到店预约',
        introduction: '未到店',
        progressBarTitle1: '超时未到店',
        progressBarTitle2: '未来',
        sum: 0,
        noNumber: 0,
        progressBar1: 0,
        progressBarAll1: 0,
        progressBar2: 0,
        progressBarAll2: 0,
        routerLinkTo: '/potenCus/customer/orderManage/index',
        tomorrow: 0,
        consultant: this.selectBvalue
      },
      formData3: {
        title: '基盘维系',
        introduction: '未维系',
        progressBarTitle1: '逾期未维系',
        progressBarTitle2: '未来',
        sum: 0,
        noNumber: 0,
        progressBar1: 0,
        progressBarAll1: 0,
        progressBar2: 0,
        progressBarAll2: 0,
        routerLinkTo: '/potenCus/basePlate/basePlateFollow/index',
        tomorrow: 0
      },
      formData4: {
        title: '新车关怀',
        introduction: '未关怀',
        progressBarTitle1: '逾期未关怀',
        progressBarTitle2: '未来',
        sum: 0,
        noNumber: 0,
        progressBar1: 0,
        progressBarAll1: 0,
        progressBar2: 0,
        progressBarAll2: 0,
        routerLinkTo: '/potenCus/customer/customerVisit/index',
        tomorrow: 0
      },
      formData: {},
      activeName: 'first',
      menus: [
        {
          title: '跟进统计',
          path: 'dashboard/FollowUpStatistics/index',
          params: { rowDate: this.createPickers }
        },
        {
          title: '销售过程',
          path: 'dashboard/SalesProcess/index',
          params: { rowDate: this.rowDate }
        },
        {
          title: '团队绩效',
          path: 'dashboard/TeamPerformance/index',
          params: { rowDate: this.rowDate }
        }
      ],
      rowDate: {},
      radio1: 'day',
      radioList: [
        { value: 'day', text: '日' },
        { value: 'week', text: '周' },
        { value: 'month', text: '月' },
        { value: 'quarter', text: '季' },
        { value: 'year', text: '年' }
      ],
      dateDay: 7,
      searchDate: '',
      selectZvalue: '',
      showDate: '',
      bannerHeight: 250
    };
  },
  mounted() {
    const windowH = document.body.clientHeight - 340;
    console.log('windowH:', windowH);
    if (windowH > 260) {
      this.bannerHeight = windowH + 'px';
    } else {
      this.bannerHeight = '260px';
    }
  },
  computed: {
    // 日期区间快捷键方法
    createPicker() {
      const start = new Date();
      return this.formatDate(start, '/');
      /*let days = this.dateDay;
      if (days === 0) {
        const start = new Date();
        return this.formatDate(start, '/')
      } else {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * Number(days));
        return this.formatDate(start, '/')+' - '+this.formatDate(end, '/')
      }*/
    },
    // 日周月季年时间显示
    showPicker() {
      const start = new Date();
      let date = '';
      switch (this.radio1) {
        case 'day':
          date = moment().format('YYYY/MM/DD');
          break;
        case 'week':
          var weekOfday = moment(start, 'YYYY-MM-DD').format('E'); //计算指定日期是这周第几天
          var last_monday = moment(start)
            .subtract(weekOfday - 1, 'days')
            .format('YYYY/MM/DD'); //周一日期
          var last_sunday = moment(start)
            .add(7 - weekOfday, 'days')
            .format('YYYY/MM/DD'); //周日日期
          date = last_monday + ' - ' + last_sunday;
          break;
        case 'month':
          var start_monthday = moment(start)
            .startOf('month')
            .format('YYYY/MM/DD'); //月初日期
          var last_monthday = moment(start)
            .endOf('month')
            .format('YYYY/MM/DD'); //月末日期
          date = start_monthday + ' - ' + last_monthday;
          break;
        case 'quarter':
          var start_quarter = moment(start)
            .startOf('quarter')
            .format('YYYY/MM/DD');
          var last_quarter = moment(start)
            .endOf('quarter')
            .format('YYYY/MM/DD');
          date = start_quarter + ' - ' + last_quarter;
          break;
        case 'year':
          var start_yearday = moment(start)
            .startOf('year')
            .format('YYYY/MM/DD'); //年初日期
          var last_yearday = moment(start)
            .endOf('year')
            .format('YYYY/MM/DD'); //年末日期
          date = start_yearday + ' - ' + last_yearday;
          break;
        default:
          break;
      }
      console.log(date);
      return date;
    },
    // 日期区间快捷键方法
    createPickers() {
      return {
        periodType: 'day'
      };
      /*let days = this.dateDay;
      if (days === 0) {
        const start = new Date();
        return {
          startDate:this.formatDate(start, '-'),
          endDate:this.formatDate(start, '-'),
        }
      } else {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * Number(days));
        return {
          startDate:this.formatDate(start, '-'),
          periodType:'day',
          endDate:this.formatDate(end, '-'),
        }
      }*/
    },
    pickerOptions() {
      return {
        disabledDate(time) {
          let fromDate = forMonth(-3);
          const min = new Date(fromDate).getTime();
          if (min) {
            return time.getTime() < min;
          }
        }
      };
    }
  },
  watch: {
    searchDate(value) {
      // console.log(value.length)
      if (!value) {
        return;
      }
      switch (this.selectZvalue) {
        case 'day':
          if (value.length === 2) {
            this.radio1 = null;
            this.rowDate = {
              startDate: value[0],
              periodType: 'day',
              endDate: value[1],
              consultant: this.rowDate.consultant
            };
            this.menus[0].params.rowDate = this.rowDate;
          }
          break;
        case 'week':
          var weekOfday = moment(value, 'YYYY-MM-DD').format('E'); //计算指定日期是这周第几天
          var last_monday = moment(value)
            .subtract(weekOfday - 1, 'days')
            .format('YYYY-MM-DD'); //周一日期
          var last_sunday = moment(value)
            .add(7 - weekOfday, 'days')
            .format('YYYY-MM-DD'); //周日日期
          console.log(last_monday, last_sunday);
          this.radio1 = null;
          this.rowDate = {
            startDate: last_sunday, // 把周日放在startDate中(后台统一设置)
            periodType: 'week',
            consultant: this.rowDate.consultant
          };
          this.menus[0].params.rowDate = this.rowDate;
          break;
        case 'month':
          var last_monthday = moment(value)
            .endOf('month')
            .format('YYYY-MM-DD'); //月末日期
          this.radio1 = null;
          this.rowDate = {
            startDate: last_monthday, // 把月末日期放在startDate中(后台统一设置)
            periodType: 'month',
            consultant: this.rowDate.consultant
          };
          this.menus[0].params.rowDate = this.rowDate;
          break;
        case 'quarter':
          this.radio1 = null;
          this.rowDate = {
            startDate: value,
            periodType: 'quarter',
            consultant: this.rowDate.consultant
          };
          this.menus[0].params.rowDate = this.rowDate;
          break;
        case 'year':
          var last_yearday = moment(value)
            .endOf('year')
            .format('YYYY-MM-DD'); //年末日期
          this.radio1 = null;
          this.rowDate = {
            startDate: last_yearday, // 把年末日期放在startDate中(后台统一设置)
            periodType: 'year',
            consultant: this.rowDate.consultant
          };
          this.menus[0].params.rowDate = this.rowDate;
          break;
        default:
          break;
      }
      // console.log(value)
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.activeName = 'first';
      this.radio1 = 'day';
      this.selectvalue = 0;
      this.selectBvalue = 0;
      this.selectZvalue = '';
      this.searchDate = '';
      this.rowDate = this.createPickers;
      this.menus[0].params.rowDate = this.rowDate;
      this.queryHomePageTop();
      this.getRoleType();
      // let roleType = '10061012,10061015';
      this.getConsultant(1, null, '60').then(result => {
        result.unshift({ value: 0, text: '全部' });
        this.consults = result;
        this.Bconsults = result;
      });
    },
    go() {
      this.$router.go(0);
    },
    getRoleType() {
      this.roleType.split(',').forEach(x => {
        switch (x) {
          case '10061012': // 网销顾问
            this.roleList.NetSalesConsultant = true;
            break;
          case '10061019': // 网销经理
            this.roleList.NetSalesManager = true;
            break;
          case '10061015': // 销售顾问(展厅顾问)
            this.roleList.SalesConsultant = true;
            break;
          case '10061013': // 展厅经理
            this.roleList.ShowroomManager = true;
            break;
          default:
            break;
        }
      });
      // console.log('roleType',this.roleType,this.roleList)
    },
    async queryHomePageTop() {
      let data = {};
      if (this.rowDate.consultant) {
        data.consultant = this.rowDate.consultant;
      }
      const res = await queryHomePageTop(data);
      if (res.resultCode === 200) {
        // 潜客跟进
        this.formData1.sum = res.data.followToday;
        this.formData1.noNumber = res.data.unFollowToday;
        this.formData1.progressBar1 = res.data.overTimeFollow;
        this.formData1.progressBarAll1 = res.data.followToday;
        this.formData1.progressBar2 = res.data.futureFollow;
        this.formData1.progressBarAll2 = res.data.followToday;
        this.formData1.tomorrow = res.data.tomorrowFollow;
        this.formData1.firstTouchCount = res.data.firstTouchCount;
        this.formData1.judgeCount = res.data.judgeCount;
        // 预约到店
        this.formData2.sum = res.data.appointToday;
        this.formData2.noNumber = res.data.unArriveAppointToday;
        this.formData2.progressBar1 = res.data.overTimeAppoint;
        this.formData2.progressBarAll1 = res.data.appointToday;
        this.formData2.progressBar2 = res.data.futureAppoint;
        this.formData2.progressBarAll2 = res.data.appointToday;
        this.formData2.tomorrow = res.data.tomorrowAppoint;
        // 基盘维系
        this.formData3.sum = res.data.baseToday;
        this.formData3.noNumber = res.data.unBaseToday;
        this.formData3.progressBar1 = res.data.overTimeBase;
        this.formData3.progressBarAll1 = res.data.baseToday;
        this.formData3.progressBar2 = res.data.futureBase;
        this.formData3.progressBarAll2 = res.data.baseToday;
        this.formData3.tomorrow = res.data.tomorrowBase;
        // 新车关怀
        this.formData4.sum = res.data.visitToday;
        this.formData4.noNumber = res.data.unVisitToday;
        this.formData4.progressBar1 = res.data.overTimeVisit;
        this.formData4.progressBarAll1 = res.data.visitToday;
        this.formData4.progressBar2 = res.data.futureVisit;
        this.formData4.progressBarAll2 = res.data.visitToday;
        this.formData4.tomorrow = res.data.tomorrowVisit;
        // 待审核
        this.formData = res.data;
        this.qryAuditOrderNum();
        // console.log(this.formData1,this.formData2,this.formData3)
      }
    },
    async qryAuditOrderNum() {
      const res = await qryAuditOrderNum();
      if (res.resultCode === 200) {
        // 待审核
        this.formData = { ...this.formData, orderNum: res.data };
      }
    },
    // 时间戳转年月日
    formatDate(value, str) {
      // 这里的 value 就是需要过滤的数据
      if (value == null || value == '') {
        return '';
      }
      var date = new Date(Number(value));
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      return year + str + month + str + day;
    },
    changeDate(value) {
      // console.log(this.rowDate)
      this.selectZvalue = '';
      if (value) {
        if (value === 'day') {
          this.rowDate = this.createPickers;
        } else {
          this.rowDate = { periodType: value };
        }
        if (!this.selectBvalue) {
          this.rowDate.consultant = this.selectBvalue;
        }
        this.menus[0].params.rowDate = this.rowDate;
        this.searchDate = '';
      }
    },
    getQuarter(str, arr) {
      // console.log(str, arr)
      this.searchDate = arr[1].split(' ')[0];
    },
    changeSelect(value) {
      this.selectBvalue = value;
      this.formData1.consultant = value;
      this.formData2.consultant = value;
      this.rowDate = { ...this.rowDate, consultant: value };
      this.menus[0].params.rowDate = this.rowDate;
      this.queryHomePageTop();
    },
    changeBSelect(value) {
      this.rowDate = { ...this.rowDate, consultant: value };
      this.menus[0].params.rowDate = this.rowDate;
    },
    changeZSelect(value) {
      // console.log(value,this.searchDate)
      this.searchDate = '';
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    clearDate() {
      this.searchDate = '';
    },
    closeDialog() {
      this.$emit('close', false);
    }
  }
};
</script>

<style lang="less" scoped>
.bannerCol {
  width: 100%;
  height: 250px;
  margin-bottom: 15px;
  background: url('../../assets/img/index/banner.jpg') no-repeat center center;
  background-size: cover;
}
.home {
  /deep/ .el-header {
    padding: 0;
  }
  /deep/ .el-main {
    padding: 10px 0 0 0;
  }
}
.topSearch {
  height: 59px;
  background: #fff;
  line-height: 59px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  .maintoplefttext {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 59px;
    /deep/ .el-radio-group {
      height: 32px;
    }
  }
  /deep/ .el-icon-date:before {
    color: rgba(0, 0, 0, 0.85);
    margin-right: 8px;
  }
  .topSearchRight {
    display: flex;
    align-items: center;
    /deep/ .el-form-item--small.el-form-item {
      margin-bottom: 0;
      width: 225px;
      .el-form-item__label {
        color: #2089f9;
        padding-right: 0;
      }
      .el-input--suffix .el-input__inner {
        border: none;
        color: #2089f9;
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
}
.topflex {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
  .flexone {
    flex: 1;
    margin-left: 10px;
  }
}
.maintop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: #fff;
  margin-bottom: 10px;
  padding-left: 24px;
  /deep/ .el-form-item,
  .el-form-item--small {
    margin-bottom: 0;
  }
  // .maintopleft{
  //   display: inline-block;
  // }
}

.lazyLoadTab {
  // display: inline-block;
  width: 250px;
  /deep/ .el-tabs__item {
    font-weight: 400;
    height: 52px;
    line-height: 52px;
  }
  /deep/ .el-tabs__item.is-active {
    font-weight: 500;
  }
  /deep/ .el-tabs__header,
  .is-top {
    margin-bottom: 0;
  }
  /deep/ .el-tabs__active-bar {
    height: 4px;
  }
  /deep/ .el-tabs__nav-wrap::after {
    height: 0;
  }
}
.tabShow {
  min-height: 300px;
}
</style>
